<template>
  <div class="order_history">
      <backHeader title="投注记录" rightTitle="汇总"></backHeader>
      <filterPage></filterPage>
      <div>
          <van-tabs v-model="active" animated>
                <van-tab title="全部订单">
                    <noData v-if="allOrders.length===0"></noData>
                    <div class="item" v-for="(allOrder,index) in allOrders" :key="index">
                        <div class="left">
                            <div class="time">{{allOrder.time}}</div>
                            <div class="message">{{allOrder.message}}</div>
                        </div>
                        <div class="right">{{allOrder.right}}</div>
                    </div>
                </van-tab>
                <van-tab title="已中奖">
                    <noData v-if="winList.length===0"></noData>
                    <div class="item" v-for="(win,index) in winList" :key="index">
                        <div class="left">
                            <div class="time">{{win.time}}</div>
                            <div class="message">{{win.message}}</div>
                        </div>
                        <div class="right">{{win.right}}</div>
                    </div>
                </van-tab>
                <van-tab title="待开奖">
                    <noData v-if="soonList.length===0"></noData>
                    <div class="item" v-for="(soon,index) in soonList" :key="index">
                        <div class="left">
                            <div class="time">{{soon.time}}</div>
                            <div class="message">{{soon.message}}</div>
                        </div>
                        <div class="right">{{soon.right}}</div>
                    </div>
                </van-tab>
                <van-tab title="已撤单">
                    <noData v-if="cancelList.length===0"></noData>
                    <div class="item" v-for="(cancel,index) in cancelList" :key="index">
                        <div class="left">
                            <div class="time">{{cancel.time}}</div>
                            <div class="message">{{cancel.message}}</div>
                        </div>
                        <div class="right">{{cancel.right}}</div>
                    </div>
                </van-tab>
            </van-tabs>
      </div>
  </div>
</template>

<script>
import backHeader from '../../components/backHeader'
import noData from '../../components/noData'
import filterPage from '../../components/filterPage'
export default {
  name: 'bettingRecord',
  components: {
    backHeader, noData, filterPage
  },
  data () {
    return {
      active: 0,
      allOrders: [{
        time: '10.20.30',
        message: '娃哈哈',
        right: '200'
      }],
      winList: [],
      soonList: [],
      cancelList: []
    }
  }
}
</script>

<style scoped>
.item {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    color: #3f3f3f;
    -webkit-box-shadow: 0 1px 2px #ccc;
    box-shadow: 0 1px 2px #ccc;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 8px 12px;
}
.item .left .time {
    color: #ccc;
    font-size: 12px;
    margin-bottom: 8px;
}
.item .left .message {
    font-size: 14px;
    color: #333;
}
</style>
